<template>
    <div class="wrap normal">
        <!-- 搜索条件 -->
        <div class="wrap-form" id="wrap-form">
            <div class="left-panel">
                <el-form :inline="true" :model="form" label-width="100px" @submit.native.prevent>
                    <el-form-item label="手机号">
                        <el-input v-model="form.mobile" placeholder="请输入" clearable style="width: 220px"></el-input>
                    </el-form-item>
                    <el-form-item label="邀请人手机号">
                        <el-input v-model="form.inviterUserMobile" placeholder="请输入" clearable style="width: 220px"></el-input>
                    </el-form-item>
                    <el-form-item label="分润人手机号">
                        <el-input v-model="form.agentInvitedUserMobile" placeholder="请输入" clearable style="width: 220px"></el-input>
                    </el-form-item>
                    <el-form-item label="vip开通状态">
                        <el-select v-model="form.vipStatus" placeholder="请选择" clearable style="width: 220px">
                            <el-option v-for="(item, index) in vipStatusOptions" :key="index" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="公众号状态">
                        <el-select v-model="form.isFocusWechatService" placeholder="请选择" clearable style="width: 220px">
                            <el-option v-for="(item, index) in focusWechaStatusOptions" :key="index" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="代理商等级">
                        <el-select v-model="form.agentLevel" placeholder="请选择" clearable style="width: 220px">
                            <el-option v-for="(item, index) in userLevelStatusOptions" :key="index" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="注册类型">
                        <el-select v-model="form.isDirect" placeholder="请选择" clearable style="width: 220px">
                            <el-option v-for="(item, index) in isDirectStatusOptions" :key="index" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" @click="pageOperate('search')">查询</el-button>
                        <el-button icon="el-icon-refresh" @click="pageOperate('refresh')">刷新</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <!-- table数据 -->
        <div class="wrap-table">
            <el-table :data="tableData" :max-height="tableMaxHeight" border v-loading="tableLoading" :header-cell-style="{ background: '#F5F6FA' }">
                <el-table-column type="index" label="序号" width="50" align="center"> </el-table-column>
                <el-table-column prop="mobile" label="手机号" min-width="100"> </el-table-column>
                <el-table-column label="头像" min-width="80">
                    <template slot-scope="scope">
                        <el-image style="width: 50px; height: 50px; border-radius: 50%; cursor: pointer" :src="scope.row.personalFrontPhoto" fit="fill" :preview-src-list="[scope.row.personalFrontPhoto]"></el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="nickName" label="昵称" min-width="100"> </el-table-column>
                <el-table-column label="注册时间" min-width="140">
                    <template slot-scope="scope">
                        {{ scope.row.createTime | iso8601DateTimeFormat }}
                    </template>
                </el-table-column>
                <el-table-column prop="vipStatusName" label="vip开通状态" min-width="100"></el-table-column>
                <el-table-column prop="vipExpirationDay" label="vip剩余天数" min-width="100"></el-table-column>
                <el-table-column prop="isFocusWechatServiceName" label="公众号关注状态" min-width="120"></el-table-column>
                <el-table-column prop="hasLowPriceNumber" label="剩余次卡数量" min-width="100"></el-table-column>
                <el-table-column prop="shareCodeUrl" label="用户分享码url" min-width="100">
                    <template slot-scope="scope">
                        <el-image style="width: 50px; height: 50px; cursor: pointer" :src="scope.row.shareCodeUrl" fit="fill" :preview-src-list="[scope.row.shareCodeUrl]"></el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="inviterUserMobile" label="邀请人手机号" min-width="100"></el-table-column>
                <el-table-column prop="inviterRealName" label="邀请人姓名" min-width="100"></el-table-column>
                <el-table-column prop="agentLevelName" label="代理商等级" min-width="100"></el-table-column>
                <el-table-column prop="agentInvitedUserRealName" label="分润人姓名" min-width="100"></el-table-column>
                <el-table-column prop="agentInvitedUserMobile" label="分润人手机号" min-width="100"></el-table-column>
                <el-table-column prop="isDirectName" label="注册类型" min-width="100"></el-table-column>
                <el-table-column prop="trialDeadlineDay" label="试用代理剩余时长" min-width="120"></el-table-column>
                <el-table-column label="操作" width="100" fixed="right">
                    <template slot-scope="scope">
                        <el-button type="text" @click="pageOperate('openAgent', scope.row)" :disabled="scope.row.agentLevel !== 0">开通代理</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination :total="page.totalNum" :page.sync="page.pageNum" :limit.sync="page.pageSize" layout="total, sizes, prev, pager, next, jumper" @pagination="getTableData" />
        </div>
        <!-- 操作 -->
        <el-dialog v-if="operateDialog" :title="operateTitle" :visible.sync="operateDialog" @close="closeOperateDialog" :width="`${operateWidth}px`" :close-on-press-escape="false" :close-on-click-modal="false">
            <el-form ref="operateForm" :model="operateForm" :rules="operateRules" label-width="130px">
                <el-form-item label="代理商姓名" prop="agentUserName">
                    <el-input v-model="operateForm.agentUserName" clearable placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="代理商等级" prop="agentLevel">
                    <el-select v-model="operateForm.agentLevel" clearable placeholder="请选择" style="width: 100%">
                        <el-option v-for="item in agentLevelStatusOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="代理费支付状态" prop="isPayAgentMoney">
                    <el-select v-model="operateForm.isPayAgentMoney" clearable placeholder="请选择" style="width: 100%">
                        <el-option v-for="item in payAgentMoneyStatusOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="支付凭证截图" prop="isPayAgentProof" v-if="operateForm.isPayAgentMoney === 1">
                    <UploadPhotoList formKey="isPayAgentProof" :uploadedUrl="operateForm.isPayAgentProof" :showLimit="true" :limitNum="1" :showSize="true" :limitSize="5" :showType="true" @update-form="updateForm(arguments)"></UploadPhotoList>
                </el-form-item>
                <el-form-item label="代理费备注">
                    <el-input v-model="operateForm.agentPcRemark" clearable type="textarea" :rows="3" placeholder="请输入"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="closeOperateDialog">取 消</el-button>
                <el-button type="primary" :loading="operateLoading" @click="operateSubmit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import tableHeight from '@/mixins/tableHeight'
import { getUserList, postOpenAgentData } from '@/api/user'
import { vipStatusOptions, focusWechaStatusOptions, userLevelStatusOptions, agentLevelStatusOptions, isDirectStatusOptions, payAgentMoneyStatusOptions } from '@/filters/options'
import UploadPhotoList from '@/components/upload/uploadPhotoList.vue'
export default {
    name: 'UserIndex',
    mixins: [tableHeight],
    components: {
        UploadPhotoList
    },
    data() {
        return {
            // 搜索
            form: {
                mobile: '',
                vipStatus: '',
                isFocusWechatService: '',
                agentLevel: '',
                isDirect: '',
                inviterUserMobile: '',
                agentInvitedUserMobile: ''
            },
            page: {
                pageNum: 1,
                pageSize: 10,
                totalNum: 0
            },
            tableData: [],
            tableLoading: false,
            // 类型
            operateType: '',
            // 标题
            operateTitle: '',
            // 弹框
            operateDialog: false,
            // 宽度
            operateWidth: 550,
            // loading
            operateLoading: false,
            // 操作form
            operateForm: {
                id: '',
                // 代理商姓名
                agentUserName: '',
                // 代理商等级 2、高级代理 3、试用代理
                agentLevel: '',
                // 代理费支付状态: 1、已支付 2、无需支付
                isPayAgentMoney: '',
                // 支付凭证截图
                isPayAgentProof: '',
                // 正式代理未支付代理费备注
                agentPcRemark: ''
            },
            operateRules: {
                agentUserName: [
                    { required: true, message: '请输入代理商姓名', trigger: ['blur'] }
                ],
                agentLevel: [
                    { required: true, message: '请选择代理商等级', trigger: ['blur', 'change'] }
                ],
                isPayAgentMoney: [
                    { required: true, message: '请选择代理费支付状态', trigger: ['blur', 'change'] }
                ],
                isPayAgentProof: [
                    { required: true, message: '请上传支付凭证截图', trigger: ['blur', 'change'] }
                ]
            },
            vipStatusOptions,
            focusWechaStatusOptions,
            userLevelStatusOptions,
            agentLevelStatusOptions,
            isDirectStatusOptions,
            payAgentMoneyStatusOptions
        };
    },
    methods: {
        // 上传图片子组件通信
        updateForm(uploadData) {
            this.operateForm[uploadData[0]] = uploadData[1]
            this.$refs.operateForm.validateField(uploadData[0]);
        },
        // 数据
        getTableData() {
            this.tableLoading = true
            const data = {
                pageNum: this.page.pageNum,
                pageSize: this.page.pageSize,
                ...this.form
            }
            getUserList(data).then(res => {
                this.tableLoading = false
                this.tableData = res.data.records
                this.page.totalNum = res.data.total
            }).catch(error => {
                this.tableLoading = false
            })
        },
        // 操作
        pageOperate(type, row) {
            this.operateType = type
            switch (type) {
                case 'search':
                    this.getTableData()
                    break;
                case 'refresh':
                    Object.assign(this.$data, this.$options.data())
                    this.getTableData()
                    break;
                case 'openAgent':
                    this.operateDialog = true
                    this.operateTitle = '开通代理'
                    this.operateForm.id = row.id
                    break;
                default:
                    break;
            }
        },
        // 关闭弹框
        closeOperateDialog() {
            this.operateLoading = false
            this.operateDialog = false
            this.operateType = ''
            this.operateTitle = ''
            this.operateForm = this.$options.data().operateForm
            this.$refs['operateForm'].resetFields()
        },
        // 操作提交
        operateSubmit() {
            this.$refs.operateForm.validate(valid => {
                if (valid) {
                    let formData = JSON.parse(JSON.stringify(this.operateForm))
                    if (this.operateType === 'openAgent') {
                        this.operateLoading = true
                        postOpenAgentData(formData).then(res => {
                            this.getTableData()
                            this.$message_tip(`${this.operateTitle}成功`, 'success')
                            this.closeOperateDialog()
                        }).catch(error => {
                            this.operateLoading = false
                        })
                    }
                }
            })
        }
    },
    mounted() {
        this.getTableData()
    }
};
</script>

<style lang="scss" scoped>
</style>